<!-- 扶贫资讯 -->
<template>
    <div class="information">
        <el-card>
            <el-button type="primary" icon="Plus" @click="addInformation">新增资讯</el-button>
            <!-- 表格 -->
            <div class="table">
                <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;" max-height="460px">
                    <el-table-column label="序号" type="index" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="title" label="资讯标题" width="450" show-overflow-tooltip />
                    <el-table-column prop="content" label="资讯内容">
                        <template #default="scope">
                            <el-button link size="small" type="primary" @click="handleDetail(scope.row)">查看资讯内容</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createdDt" label="发布时间" />
                    <el-table-column label="操作" align="center" width="150px">
                        <template #default="scope">
                            <el-button size="small" type="primary" icon="Edit" @click="handleEdit(scope.row)"></el-button>
                            <el-popconfirm title="您确定删除这条公告吗?" @confirm="handleDelete(scope.row)" icon="Delete"
                                icon-color="red" width="220px">
                                <template #reference>
                                    <el-button size="small" type="danger" icon="Delete"></el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <Pagination :paginationData="paginationData" @getInfo="getHelpPoorInfo"></Pagination>
            </div>
        </el-card>
    </div>
    <!-- 弹窗 -->
    <el-dialog v-model="dialogFormVisible" :title="helpPoorForm.id ? '修改资讯' : '新增资讯'" width="50%">
        <el-form :model="helpPoorForm" :rules="rules" ref="helpPoorForms" status-icon>
            <el-form-item prop="title" label="资讯标题" :label-width="formLabelWidth">
                <el-input v-model="helpPoorForm.title" autocomplete="off" placeholder="请输入资讯标题" />
            </el-form-item>
            <el-form-item prop="content" label="资讯内容" :label-width="formLabelWidth">
                <MyEditor :content="helpPoorForm.content"></MyEditor>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <DetailDialog></DetailDialog>
</template>

<script setup lang="ts">
import MyEditor from '../../components/editor/index.vue'
import Pagination from '../../components/pagination/index.vue'
import DetailDialog from './detail_dialog/index.vue'
import { ElMessage } from 'element-plus';
import { onMounted, ref, reactive } from 'vue';
// 引入全局事件总线
import $bus from '../../bus/index'
import { reqDeleteHelpPoorInfo, reqGetHelpPoorInfo, reqOperateHelpPoorInfo } from '../../api/info/information/index'
import type { AllHelpPoor, helpPoorData, operateHelpPoorData } from '../../api/info/information/type'

// 表格数据
let tableData = ref<AllHelpPoor>([])
// 存储接口返回的分页器数据
let paginationData = ref({})
// 收集对话框中的数据
let helpPoorForm = reactive<operateHelpPoorData>({
    title: '',
    content: '',
    type: 0
})
let helpPoorForms = ref()

let dialogFormVisible = ref<Boolean>(false)
let formLabelWidth = ref<String>('80px')

// 表单校验
const rules = {
    title: [{ required: true, message: '资讯标题不能为空', trigger: 'blur' }],
    content: [{ required: true, message: '资讯内容不能为空', trigger: 'blur' }]
}

onMounted(() => {
    getHelpPoorInfo()
    $bus.on('blur', (html: any) => {
        helpPoorForm.content = html
    })
})
//获取全部 资讯 信息
const getHelpPoorInfo = async (currentpage = 1, pagesize = 10) => {
    let data: helpPoorData = {
        pageSize: pagesize,
        currentPage: currentpage,
        type: 0
    }

    let result: any = await reqGetHelpPoorInfo(data)
    if (result.code == 20000) {
        tableData.value = result.data.list
        paginationData.value = result.data
    }
}

// 新增 资讯 按钮
const addInformation = () => {
    // 显示对话框
    dialogFormVisible.value = true
    // 清空输入框
    helpPoorForm.content = ''
    helpPoorForm.title = ''
    helpPoorForm.id = ''
    $bus.emit('showDialog', {
        row: {
            content: ''
        }
    })
    // 清除校验结果
    helpPoorForms.value?.clearValidate('title')
    helpPoorForms.value?.clearValidate('content')
}

// 查看咨询内容按钮回调
const handleDetail = (row: operateHelpPoorData) => {
    $bus.emit('show', {
        isShow: true,
        content: row.content,
        title: row.title
    })
}

// 编辑表格中的数据
const handleEdit = (row: operateHelpPoorData) => {
    dialogFormVisible.value = true
    // 合并对象
    Object.assign(helpPoorForm, row)

}
// 气泡确认框 确认按钮回调 删除
const handleDelete = async (row: operateHelpPoorData) => {
    let result: any = await reqDeleteHelpPoorInfo(row)
    if (result.code == 20000) {
        // 重新获取 资讯 信息
        getHelpPoorInfo(tableData.value.length > 1 ? paginationData.value.currentPage : paginationData.value.currentPage - 1)
        ElMessage({
            type: 'success',
            message: '扶贫资讯删除成功'
        })
    } else {
        ElMessage({
            type: 'error',
            message: '扶贫资讯删除失败'
        })
    }

}
// 对话框确认按钮回调
const submit = async () => {
    await helpPoorForms.value.validate();
    // 表单校验通过
    let result: any = await reqOperateHelpPoorInfo(helpPoorForm)
    if (result.code == 20000) {
        // 关闭对话框
        dialogFormVisible.value = false
        ElMessage({
            type: 'success',
            message: helpPoorForm.id ? '扶贫资讯修改成功' : '扶贫资讯新增成功'
        })
        // 再次发请求获取最新的数据
        // getHelpPoorInfo(helpPoorForm.id ? paginationData.value.currentPage : 1)
        getHelpPoorInfo(paginationData.value.currentPage)
    } else {
        ElMessage({
            type: 'error',
            message: helpPoorForm.id ? '扶贫资讯修改失败' : '扶贫资讯新增失败'
        })
        dialogFormVisible.value = false
    }
}
</script>

<style lang="scss" scoped>
.el-form {
    padding: 20px 30px;
}

.table {
    margin: 10px 0;

    .el-table {
        font-size: 13px !important;
    }
}

.pagination {
    margin-top: 20px;
}
</style>